<template>
  <footer>
    <!-- 组件 -->
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item
        v-for="(item, index) in tabs"
        :key="index"
        :icon="item.icon"
        @click="handleTab(item.path)"
        >{{ item.title }}</van-tabbar-item
      >
      <!-- <van-tabbar-item icon="search">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">个人中心</van-tabbar-item> -->
    </van-tabbar>
  </footer>
</template>

<script>
export default {
  // bug 不能刷新active
  data() {
    return {
      active: 0,
      // show: "/",
      tabs: [
        {
          title: "首页",
          icon: "wap-home-o",
          path: "/",
        },
        {
          title: "分类",
          icon: "apps-o",
          path: "/sort",
        },

        {
          title: "购物车",
          icon: "shopping-cart-o",
          path: "/car",
        },
        {
          title: "个人中心",
          icon: "friends-o",
          path: "/center",
        },
      ],
    };
  },
  methods: {
    handleTab(path) {
      // this.show = path;
      this.$router.push(path);
    },
  },
  created() {
    //  console.log(location.hash);
    this.show = location.hash.split("#")[1];
  },
};
</script>

<style src='../assets/css/footer.css'>
</style>